<template>
  <view class="goods_wrap">
    <view class="goods_page">
      <div class="font-b col-1f476d text-cent" style="padding-top: 74upx;font-size: 60upx"><span class="font-30">¥</span>{{orderMoney}}</div>
      <div class="font-20 col-999 text-cent" style="padding-bottom: 70upx">订单编号：{{orderNum}}</div>
      <div class="bg-fff pd_l_30 pd_r_30 mg_t_10 mg_l_20 mg_r_20" style="border-radius: 0.12rem;">
        <div class="font-28 col-333 font-b yh_bd_bottom pd_t_30 pd_b_30">支付方式</div>
        <div class="row cont-center pd_t_30 pd_b_30 yh_bd_bottom">
          <div class="sign">
            <img src="../../static/img/wx.png" style="width: 68upx;height: 68upx;"/>
          </div>
          <div class="font-28 col-333 flex-1 pd_l_30">微信支付</div>
          <u-radio-group v-model="value">
            <u-radio shape="circle" active-color="#1f476d" name="weixin"></u-radio>
          </u-radio-group>
        </div>
      </div>
    </view>
    <div class="bg-fff btn-container pd_t_19 pd_b_20">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="weixinPayment">立即支付</u-button>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";

  export default {
    onLoad(option) {
      this.orderMoney = option.orderMoney;
      this.orderNum = option.orderNum;
    },

    data() {
      return {
        iconShow: false,
        iconShow1: true,
        orderMoney: '',
        orderNum: '',
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        value: 'weixin'
      }
    },
    methods: {
      makeWxPay(openId) {
        var that_ = this
        request({
          url: '/wx/unifiedOrder',//'/wx/createPrePayOrder',
          method: 'post',
          data: {
            "orderMoney": Number(that_.orderMoney).toFixed(2),
            "orderSubject": "指北针测评",
            "orderNum": that_.orderNum,
            openId: openId
          }
        }).then(res => {

          that_.wxPay(res.data)
        })
      },
      weixinPayment() {
        var that_ = this;
        let user = uni.getStorageSync('zbz_user')
        if (user && user.openId) {
          this.makeWxPay(user.openId)
        } else {
          uni.login({
            provider: 'weixin',
            success(loginRes) {
              request({
                url: '/wx/getOpenIdByCode/' + loginRes.code,
                platfom: 'weixin',
                token: true
              }).then(response => {
                let user = uni.getStorageSync('zbz_user')
                user.openId = response.openid
                uni.setStorageSync('zbz_user', user);
                that_.makeWxPay(response.openid)
              })
            }
          })
        }


      },
      wxPay(orderInfo) {
        var that_ = this;
        uni.requestPayment({
          timeStamp: orderInfo.timestamp,
          nonceStr: orderInfo.nonce_str,
          package: `prepay_id=${orderInfo.prepay_id}`,
          signType: 'MD5',
          paySign: orderInfo.sign,
          success: function (res) {
            that_.openWindow('/pages/goods/payment_successful', 'reLaunch');
          },
          fail: function (err) {
            uni.showModal({
              title: '提示',
              content: '支付失败',
              showCancel: false,
              success: function (res) {
                that_.openWindow('/pages/user/order');
              }
            })
          }
        })
      },
      openWindow: function(path, type) {
        this.$u.route({
          url: path,
          type: type || 'navigateTo'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goods_wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .goods_page {
    background: #f7f7f7;
    flex: 1;
    padding-bottom: 120upx;
  }
  .btn-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 30upx;
    padding-right: 30upx;
    box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
  }
</style>
